<template>
  <div class="question-display">
    <div class="question-header">
      <div class="question-progress">
        第 {{ questionIndex + 1 }} 题 / 共 {{ totalQuestions }} 题
      </div>
    </div>
    
    <div class="question-expression">
      {{ question?.expression }}
    </div>

    <!-- 限时回答的进度条 -->
    <div v-if="showTimer" class="answer-countdown-progress">
      <ProgressBar 
        type="time" 
        :elapsed-time="elapsedTime" 
        :total-time="totalTime" />
    </div>
    
    <div 
      class="options" 
      :data-count="question?.options?.length || 0"
    >
      <button 
        v-for="(option, index) in question?.options" 
        :key="index"
        class="option-btn"
        @click="selectOption(option)"
        :disabled="isDisabled"
      >
        {{ option }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import ProgressBar from '@/components/ProgressBar.vue'

const props = defineProps({
  question: {
    type: Object,
    default: null
  },
  questionIndex: {
    type: Number,
    default: 0
  },
  totalQuestions: {
    type: Number,
    default: 0
  },
  showTimer: {
    type: Boolean,
    default: false
  },
  totalTime: {
    type: Number,
    default: 3000 // 3 seconds in milliseconds
  },
  isDisabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['optionSelected'])

const startTime = ref(Date.now())
const elapsedTime = ref(0)
let timer = null

const selectOption = (option) => {
  emit('optionSelected', option)
}

const updateElapsedTime = () => {
  elapsedTime.value = Date.now() - startTime.value
  // Ensure we don't exceed the total time
  if (elapsedTime.value >= props.totalTime) {
    elapsedTime.value = props.totalTime
    // Auto-submit if time runs out
    if (props.showTimer) {
      emit('optionSelected', 'UNANSWERED')
    }
  }
}

onMounted(() => {
  startTime.value = Date.now()
  if (props.showTimer) {
    timer = setInterval(updateElapsedTime, 100)
  }
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

// Reset timer when question changes
const resetTimer = () => {
  startTime.value = Date.now()
  elapsedTime.value = 0
}

// Expose properties and methods to parent component
defineExpose({
  elapsedTime,
  resetTimer
})
</script>

<style scoped>
.question-display {
  max-width: 600px;
  margin: 0 auto;
}

.question-header {
  margin-bottom: 1rem;
}

.question-progress {
  font-size: 1.1rem;
  color: #333;
  text-align: center;
}

.question-expression {
  font-size: 4rem;
  margin-bottom: 2rem;
  padding: 2rem;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.option-btn {
  padding: 1.5rem;
  font-size: 2.5rem;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 当选项数为1时，占满整行 */
.options[data-count="1"] {
  grid-template-columns: 1fr;
}

/* 当选项数为3时，使用3列布局 */
.options[data-count="3"] {
  grid-template-columns: repeat(3, 1fr);
}

/* 当选项数为4时，使用2列布局（实现2×2布局） */
.options[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}

/* 当选项数为5或6时，使用3列布局 */
.options[data-count="5"],
.options[data-count="6"] {
  grid-template-columns: repeat(3, 1fr);
}

/* 当选项数大于6时，使用3列布局 */
.options[data-count="7"],
.options[data-count="8"],
.options[data-count="9"],
.options[data-count="10"],
.options[data-count="11"],
.options[data-count="12"],
.options[data-count="13"],
.options[data-count="14"],
.options[data-count="15"],
.options[data-count="16"] {
  grid-template-columns: repeat(3, 1fr);
}

.answer-countdown-progress {
  margin-bottom: 2rem;
}

.question-expression {
  font-size: 4rem;
  margin-bottom: 2rem;
  padding: 2rem;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.option-btn {
  padding: 1.5rem;
  font-size: 2.5rem;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 当选项数为1时，占满整行 */
.options[data-count="1"] {
  grid-template-columns: 1fr;
}

/* 当选项数为4时，使用2列布局（实现2×2布局） */
.options[data-count="2"],
.options[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}

</style>